<template>

	<view style="padding: 10px;">
		<view class="title">
			<text style="font-size: 20px;">{{data.title}}</text>
			<uni-fav :checked="data.isCollect" class="favBtn" :circle="true" bg-color="#dd524d"
				bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="star()" />
			<view class="time">负责人：{{data.responsiblePerson}},发布于：{{ data.releaseTime }}</view>
		</view>
		<view>

		</view>
		<view class="outline">
			简介：{{data.outline}}
		</view>
		<br />
		<!--    内容-->
		<up-parse style="min-height: 500px;white-space: pre-wrap;" :content="data.content"></up-parse>
		<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="100%" color=#ffffff SIZE=1/>
		<up-tag text="活动细则">
		</up-tag>
		<view>
			活动时间：<br />
			<up-tag :text="data.activityStartTime" type="warning" plain></up-tag> - <up-tag :text="data.activityEndTime"
				type="warning" plain></up-tag>
		</view>
		<view>
			报名时间：<br />
			<up-tag :text="data.startTime" type="success" plain></up-tag> - <up-tag :text="data.endTime" type="success"
				plain></up-tag>
		</view>
		<view>
			报名人数：{{data.signInCount}}/{{data.upperLimit==0?"人数不限":data.upperLimit}}
		</view>
		<u-row v-if="signUpInfoCode&&(data.signInCount<data.upperLimit||data.upperLimit==0)">
			<u-col style="padding: 10rpx;" span="12">
				<u-button type="warning" @click="setSignUp()">立即报名</u-button>
			</u-col>
		</u-row>
		<u-row v-else-if="!signUpInfoCode">
			<u-col style="padding: 10rpx;" span="6">
				<up-button type="success" disabled :plain="true" :hairline="true" text="已报名"></up-button>
			</u-col>
			<u-col style="padding: 10rpx;" span="6">
				<up-modal :show="show" title="提示" :content='`确定取消`+data.title+`?`' :showCancelButton="true"
					@confirm="noSignUp()"></up-modal>
				<up-button @click="show=true" type="error" :hairline="true" text="取消报名"></up-button>
			</u-col>
		</u-row>

	</view>

</template>
<script setup>
	import {
		useRoute
	} from 'vue-router';
	import {
		releaseDetail,
		signUpStatus,
		signUp,
		cancelSignUp
	} from "@/api/system/activity";
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getToken
	} from '@/utils/auth'
	import {
		setDetails,
		removeDetails
	} from '@/store/activity';
	import {
		signIn
	} from "@/api/system/record"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import config from '@/config';
	let params = ref(null)
	onLoad((options) => {
		params = options
	});
	onMounted(() => {
		getDetails()
		getSignUpInfo()
	})

	const loading = ref(true);
	const route = useRoute();
	// const id = route.query.id; // 获取URL的查询参数
	const data = ref({})
	const signUpInfoData = ref({})
	const signUpInfoCode = ref(false)

	const show = ref(false);

	function getDetails() {
		if (getToken() == '' && params.id != '') {
			setDetails(params.id)
		} else {
			removeDetails(params.id)
		}
		loading.value = true;
		releaseDetail(params.id).then(response => {
			data.value = response.data
			data.value.content = data.value.content.replace(/\/dev-api/g, config.baseUrl)
			uni.setNavigationBarTitle({
				title: data.value.title
			});
			loading.value = false;
		});
	}
	// 获取报名信息
	function getSignUpInfo() {
		signUpStatus(params.id).then(res => {
			if (res.code == 200) {
				signUpInfoData.value = res.data
				if (signUpInfoData.value == null) {
					signUpInfoCode.value = true
				} else {
					signUpInfoCode.value = false
				}
			} else {
				// console.log("未报名");
			}

		})
	}
	//报名
	function setSignUp() {
		signUp(params.id).then(res => {
			uni.showToast({
				title: res.msg,
				mask: false,
				duration: 5000
			});
			getDetails()
			getSignUpInfo()
		})
	}
	//取消报名
	function noSignUp() {
		cancelSignUp(params.id).then(res => {
			uni.showToast({
				title: res.msg,
				mask: false,
				duration: 5000
			});
			getDetails()
			getSignUpInfo()
		})
	}
	const star = () => {
		signIn(params.id).then(res => {
			data.value.isCollect = res.data
			// res.data ? activityList.value[index].collectCount++ : activityList.value[index].collectCount--
		})
	}
</script>

<style scoped lang="scss">
	.time {
		font-size: 12px;
		color: #999;
	}

	.title {
		margin: 0 auto;
		text-align: center;
	}

	.example-body {
		display: flex;
		padding: 10px 15px;
	}

	/* #ifdef MP-ALIPAY */
	.uni-fav {
		margin-left: 20rpx;
	}

	/* #endif */


	.favBtn {
		margin: 0 20rpx 20rpx 0;
		float: right;
		position: absolute;
		right: 0;
		top: 20rpx;

	}


	.example-body-fullWidth {
		padding: 32rpx 0;
	}

	.example-body-first {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
	}

	.favBtn-nav {
		// left:-50rpx;
	}
</style>